<template>
  <div class="main" v-loading="detailLoading">
    <el-form ref="form" size="mini" :model="form" disabled label-width="80px">
      <el-row :gutter="24">
        <responseBox>
          <el-form-item label="产品编码" prop="materialNo">
            <el-input v-model="form.materialNo" placeholder="产品编码"></el-input>
          </el-form-item>
        </responseBox>
        <responseBox>
          <el-form-item label="产品名称" prop="materialName">
            <el-input v-model="form.materialName" placeholder="产品名称"></el-input>
          </el-form-item>
        </responseBox>
        <responseBox>
          <el-form-item label="产品图号" prop="productDrawingNo">
            <el-input v-model="form.productDrawingNo" placeholder="产品图号"></el-input>
          </el-form-item>
        </responseBox>
        <responseBox>
          <el-form-item label="产品类型" prop="productType">
            <el-select filterable v-model="form.productType" placeholder="请选择产品类型" style="width: 100%;">
              <el-option v-for="item in productTypeList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"></el-option>
            </el-select>
          </el-form-item>
        </responseBox>
        <responseBox>
          <el-form-item label="规格" prop="specifications">
            <el-input v-model="form.specifications" placeholder="规格"></el-input>
          </el-form-item>
        </responseBox>
        <responseBox>
          <el-form-item label="型号" prop="model">
            <el-input v-model="form.model" placeholder="型号"></el-input>
          </el-form-item>
        </responseBox>
      </el-row>
    </el-form>
    <avue-crud :option="option" class="noMenuHtml" ref="crud" :data="data" @current-row-change="currentRowChange"></avue-crud>
    <avue-crud :option="detailOption" class="noMenuHtml" :table-loading="bomDetailLoading" :data="detailData">
      <template slot="lossRate" slot-scope="{row}">
        {{row.lossRate?row.lossRate+'%':''}}
      </template>
    </avue-crud>
    <div class="center mt">
      <el-button icon="el-icon-circle-close" size="mini" @click="$emit('close')">关 闭</el-button>
    </div>
  </div>
</template>

<script>
import responseBox from '@/components/base-small/response-box.vue'
import { getTree, getBomHistory, getBomDetail} from '@/api/publicBom/productBom.js'

export default {
  name: 'MainCom',
  props: ['form'],
  components: {
    responseBox
  },
  data () {
    return {
      productTypeList: [],
      detailLoading: false,
      bomDetailLoading: false,
      data: [],
      option: {
        tip: false,
        border: false,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        index: true,
        menu: false,
        highlightCurrentRow: true,
        viewBtn:false,
        maxHeight: 200,
        column: [
          {
            label: '审核状态',
            prop: 'auditStatus',
            type: 'select',
            dicUrl: '/api/blade-system/dict/dictionary?code=approval_status',
            props: {
              label: 'dictValue',
              value: 'dictKey',
            },
          },
          {
            label: '审核时间',
            prop: 'auditDatetime',
          },
          {
            label: 'BOM审批人',
            prop: 'approver',
          },
          {
            label: 'BOM版本号',
            prop: 'version',
          },
          {
            label: '创建人',
            prop: 'createUserName',
          },
          {
            label: '创建日期',
            prop: 'createTime',
            type: 'date',
            format: 'yyyy-MM-dd'
          },
        ]
      },
      detailData: [],
      detailOption: {
        tip: false,
        border: false,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        index: true,
        menu: false,
        viewBtn:false,
        defaultExpandAll: true,
        column: [
          {
            label: '零件编码',
            prop: 'materialNo',
            width: 140,
          },
          {
            label: '零件类型',
            prop: 'materialTypes',
            type: 'cascader',
            dicUrl: '/api/materialgroup/getTree?code=materials',
            props: {
              label: 'dictValue',
              value: 'dictKey',
            },
          },
          {
            label: '零件组',
            prop: 'materialGroupName',
          },
          {
            label: '零件名称',
            prop: 'materialName',
          },
          {
            label: '内部图号',
            prop: 'innerDrawingNo',
          },
          {
            label: '规格',
            prop: 'specifications',
          },
          {
            label: '型号',
            prop: 'model',
          },
          {
            label: '定额',
            prop: 'quota',
            width: 60
          },
          {
            label: '计量单位',
            prop: 'unit',
            type: 'select',
            dicUrl: '/api/unit/list-none-page',
            dicFormatter: res => {
              const arr = [];
              res.data.forEach(i => {
                arr.push({
                  label: `${i.name}(${i.code})`,
                  value: i.code
                });
              });
              return arr;
            },
          },
          {
            label: '损耗率',
            prop: 'lossRate',
            slot: true,
            width: 70
          },
        ]
      }
    }
  },
  created () {
    getTree({code: 'materials', dictKey: 'P'}).then(res => {
      this.productTypeList = res.data.data
    })
    this.detailLoading = true
    getBomHistory({materialNo: this.form.materialNo}).then(res => {
      this.data = res.data.data
      this.detailLoading = false
      if (this.data.length > 0) {
        this.$nextTick(() => {
          this.$refs.crud.setCurrentRow(this.data[0])
        })
      }
    }).catch(() => {
      this.detailLoading = false
    })
  },
  methods: {
    currentRowChange (row) {
      this.bomDetailLoading = true
      getBomDetail({productId: this.form.materialNo, businessId: row.topProductNo}).then(res => {
        this.detailData = res.data.data
        this.bomDetailLoading = false
      }).catch(() => {
        this.bomDetailLoading = false
      })
    },
  }
}
</script>

<style scoped lang="scss">

</style>
